<template>
  <div>
    <div id="result_id" >
      <el-card>
        <div slot="header" class="clearfix text-left">
          <el-col :span="23">
            <span class="title-icon">基本信息</span>
          </el-col>
        </div>
        <el-row style="font-size: 10px">
          <el-col :span="4">
            <span>唯一标识：</span>
            <span>{{shippingOrder.clientReference}}({{shippingOrder.shipmentId}})</span>
          </el-col>
          <el-col :span="2">
            <span>主追踪号:</span>
            <span>{{shippingOrder.masterTrackNo}}</span>
          </el-col>
          <el-col :span="2">
            <span>件数:</span>
            <span>{{shippingOrder.packageCount}}</span>
          </el-col>
          <el-col :span="2">
            <span>参考号1:</span>
            <span>{{shippingOrder.reference1}}</span>
          </el-col>
          <el-col :span="2">
            <span>参考号2:</span>
            <span>{{shippingOrder.reference2}}</span>
          </el-col>
          <el-col :span="2">
            <span>参考号3:</span>
            <span>{{shippingOrder.reference3}}</span>
          </el-col>
        </el-row>
      </el-card>
     <el-row>
        <el-col :span="8">
          <el-card>
            <div slot="header" class="clearfix text-left">
              <el-col :span="16">
                <span class="title-icon">发件信息<cite>（tips：红色表示取的帐号配置的默认值）</cite></span>
              </el-col>
            </div>
            <el-row style="margin-top: 10px;">
              <el-col :span="4">
                <span>公司:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperCompanyName">{{shippingOrder.shipperCompanyName?shippingOrder.shipperCompanyName:shippingAccount.shipperCompanyName}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="4">
                <span>联系人:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperPersonName">{{shippingOrder.shipperPersonName?shippingOrder.shipperCompanyName:shippingAccount.shipperCompanyName}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="4">
                <span>电话:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperPhoneNumber">{{shippingOrder.shipperPhoneNumber?shippingOrder.shipperCompanyName:shippingAccount.shipperCompanyName}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="4">
                <span>国家:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperCountryCode">{{shippingOrder.shipperCountryCode?shippingOrder.shipperCompanyName:shippingAccount.shipperCompanyName}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="4">
                <span>省/州:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperStateProvinceCode">{{shippingOrder.shipperStateProvinceCode?shippingOrder.shipperStateProvinceCode:shippingAccount.shipperStateProvinceCode}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="4">
                <span>城市:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperCity">{{shippingOrder.shipperCity?shippingOrder.shipperCity:shippingAccount.shipperCity}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="4">
                <span>邮编:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperPostalCode">{{shippingOrder.shipperPostalCode?shippingOrder.shipperPostalCode:shippingAccount.shipperPostalCode}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="4">
                <span>地址1:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperAddressLine1">{{shippingOrder.shipperAddressLine1?shippingOrder.shipperAddressLine1:shippingAccount.shipperAddressLine1}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="4">
                <span>地址2:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperAddressLine2">{{shippingOrder.shipperAddressLine2?shippingOrder.shipperAddressLine2:shippingAccount.shipperAddressLine2}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="4">
                <span>地址3:</span>
              </el-col>
              <el-col :span="8">
                <span  v-model="shippingOrder.shipperAddressLine3">{{shippingOrder.shipperAddressLine3?shippingOrder.shipperAddressLine3:shippingAccount.shipperAddressLine3}}</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
       <el-col :span="8">
         <el-card>
           <div slot="header" class="clearfix text-left">
             <el-col :span="16">
               <span class="title-icon">派送信息<cite>（tips：红色表示取的帐号配置的默认值）</cite></span>
             </el-col>
           </div>
           <el-row style="margin-top: 10px;">
             <el-col :span="4">
               <span>公司:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToCompanyName">{{shippingOrder.shipperToCompanyName}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>联系人:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToPersonName">{{shippingOrder.shipperToPersonName}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>电话:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToPhoneNumber">{{shippingOrder.shipperToPhoneNumber}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>国家:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToCountryCode">{{shippingOrder.shipperToCountryCode}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>省/州:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToStateProvinceCode">{{shippingOrder.shipperToStateProvinceCode}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>城市:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToCity">{{shippingOrder.shipperToCity}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>邮编:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToPostalCode">{{shippingOrder.shipperToPostalCode}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>地址1:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToAddressLine1">{{shippingOrder.shipperToAddressLine1}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>地址2:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToAddressLine2">{{shippingOrder.shipperToAddressLine2}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>地址3:</span>
             </el-col>
             <el-col :span="4">
               <span  v-model="shippingOrder.shipperToAddressLine3">{{shippingOrder.shipperToAddressLine3}}</span>
             </el-col>
           </el-row>
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card>
           <div slot="header" class="clearfix text-left">
             <el-col :span="8">
               <span class="title-icon">账号信息</span>
             </el-col>
           </div>
           <el-row style="margin-top: 10px;">
             <el-col :span="4">
               <span>代码:</span>
             </el-col>
             <el-col :span="4">
               <span >{{shippingAccount.code}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>别名:</span>
             </el-col>
             <el-col :span="4">
               <span  >{{shippingAccount.name}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>快递类型:</span>
             </el-col>
             <el-col :span="4">
               <span  >{{shippingAccount.shippingWay}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>付款账户:</span>
             </el-col>
             <el-col :span="4">
               <span  >{{shippingAccount.financeAccountNumber}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>服务类型:</span>
             </el-col>
             <el-col :span="4">
               <span  >{{shippingAccount.serviceType}}</span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 20px;">
             <el-col :span="4">
               <span>包裹类型:</span>
             </el-col>
             <el-col :span="4">
               <span  >{{shippingAccount.packagingType}}</span>
             </el-col>
           </el-row>
         </el-card>
       </el-col>
     </el-row>
      <el-col>
        <el-card>
          <div slot="header" class="clearfix text-left">
            <el-col :span="8">
              <span class="title-icon">包裹信息</span>
            </el-col>
          </div>
          <el-table :data="packages" style="width: 100%;font-size: 10px">
            <ex-table-column
              type="index"
              property="sorted"
              label="序号"
              :auto-fit="true"
              :fit-header="true">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </ex-table-column>
            <el-table-column property="referenceNo" label="参考号" >
            </el-table-column>
            <el-table-column property="weight" label="重量(LBS)" >
            </el-table-column>
            <el-table-column property="length" label="长(IN)" >
            </el-table-column>
            <el-table-column property="width" label="宽(IN)" >
            </el-table-column>
            <el-table-column property="height" label="高(IN)" >
            </el-table-column>
            <el-table-column property="trackNo" label="追踪号" >
            </el-table-column>
            <el-table-column property="labelUrl" width="310px" label="标签" >
            </el-table-column>
            <el-table-column property="updateTime" label="更新时间">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </div>
  </div>
</template>
<script>
  import { ajax } from "@/store/yg/common/utils";
  import axios from "axios";
  import * as constant from "@/store/yg/common/constant";

  export default {
    components: {},
    props: [],
    data() {
      return {
        packages: [],
        shippingOrder: {
          clientReference: "",
          shipmentId: "",
          masterTrackNo: "",
          packageCount: "",
          reference1: "",
          reference2: "",
          reference3: "",
          shipperCompanyName: "",
          shipperPersonName: "",
          shipperPhoneNumber: "",
          shipperCountryCode: "",
          shipperStateProvinceCode: "",
          shipperCity: "",
          shipperPostalCode: "",
          shipperAddressLine1: "",
          shipperAddressLine2: "",
          shipperAddressLine3: "",
          shipperToCompanyName: "",
          shipperToPersonName: "",
          shipperToPhoneNumber: "",
          shipperToCountryCode: "",
          shipperToStateProvinceCode: "",
          shipperToCity: "",
          shipperToPostalCode: "",
          shipperToAddressLine1: "",
          shipperToAddressLine2: "",
          shipperToAddressLine3: "",
        },
        shippingAccount: {
          code: "",
          name: "",
          shippingWay: "",
          financeAccountNumber: "",
          serviceType: "",
          packagingType: "",
        },
      };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.initShippingOrderAndPackage();
    },
    methods: {
      initShippingOrderAndPackage(){
        let id = this.$route.query.pid;
        ajax("viewShippingOrderAndPackage", {id:id}).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.shippingOrder = res.data;
              this.shippingAccount = res.data2;
              this.packages = res.data3;
            }else{
              this.$message.error("初始化失败"+res.message);
            }
          },
          error => {
            console.log(error);
          }
        );
      },



    },
  };
</script>
<style>
</style>
